<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-01-11 11:46:58
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-02 15:11:18
 * @FilePath: \cxl-h5\src\pages\login\base\Index.vue
-->
<template>
    <section class="base">
        <cxl-input
            type="number"
            v-model="data.baseData.phone"
            placeholder="请输入手机号码"
            bgColor="#fff"
            clearable
            round
            required
            checkType="phone"
            ref="phoneRef"
        ></cxl-input>
        <section class="base-line">
            <cxl-input
                type="number"
                v-model="data.baseData.code"
                placeholder="请输入验证码"
                clearable
                round
                required
                bgColor="#fff"
                errorText="验证码不能为空！"
                ref="codeRef"
            ></cxl-input>
            <cxl-button
                :class="['get-code-btn', data.baseData.phone ? 'active' : '']"
                @click="data.onRegisterCode(phoneRef)"
                round
                border
            >
                {{ data.isCountDownFinish ? '获取验证码' : `重新获取(${data.timeNumber})` }}</cxl-button
            >
        </section>
        <cxl-input
            type="password"
            v-model="data.baseData.password"
            placeholder="请设置新密码（英文+数字至少8位）"
            clearable
            showPassword
            round
            required
            bgColor="#fff"
            ref="passwordRef"
            check-type="loginPassword"
            @blur="data.checkPassword"
        ></cxl-input>
        <cxl-input
            type="password"
            v-model="data.baseData.passwordAgain"
            placeholder="请再次输入密码"
            clearable
            showPassword
            round
            required
            bgColor="#fff"
            ref="passwordAgainRef"
            check-type="loginPassword"
            :contarst="data.identical"
            :errTxt="data.errorPasswordText"
            @blur="data.checkPasswordEqually"
        ></cxl-input>
    </section>
</template>
<script setup lang="ts">
import { ref, reactive, watchEffect, onDeactivated, onActivated } from 'vue'
import { RegisterBaseInformationData } from './index'
import { useRouter } from 'vue-router'

//初始化数据
const router = useRouter()

const data = reactive(new RegisterBaseInformationData())

const props = defineProps(['register'])

const emits = defineEmits(['update'])

const phoneRef = ref()
const codeRef = ref()
const passwordRef = ref()
const passwordAgainRef = ref()

const validate = () => {
    const a = phoneRef.value.validateInput()
    const b = codeRef.value.validateInput()
    const c = passwordRef.value.validateInput()
    const d = passwordAgainRef.value.validateInput()
    console.log(a, b, c, d, data.identical)
    return a && b && c && d && data.identical
}

//向外暴露校验方法
defineExpose({ validate })

watchEffect(() => {
    emits('update', data.baseData)
    console.log(props.register)
    data.isRegister = props.register == 'true' ? true : false
})
onActivated(() => {
    console.log('onActivated')
    passwordRef.value.reset()
    passwordAgainRef.value.reset()
})
onDeactivated(() => {
    if (!['protocol', 'register'].includes(router.currentRoute.value.name as string)) {
        phoneRef.value.reset()
        codeRef.value.reset()
        passwordRef.value.reset()
        passwordAgainRef.value.reset()
        data.resetBase()
    }
})
</script>

<style scoped lang="scss">
.base-line {
    display: flex;
    justify-content: space-between;
    > section {
        &:nth-child(1) {
            width: 60%;
        }
        &:nth-child(2) {
            width: calc(40% - 1rem);
        }
    }
}

.get-code-btn {
    opacity: 0.5;
    &.active {
        opacity: 1;
    }
}
</style>
